<!DOCTYPE html>
<html>
<head>
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?d890b1f16fb364253e79c5bb20225c3a";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


    

    

    
<!-- Baidu Tongji -->
<script>var _hmt = _hmt || []</script>
<script async src="//hm.baidu.com/hm.js?busuanzi_value_site_uv"></script>
<!-- End Baidu Tongji -->




    <meta charset="utf-8">
    <meta name="baidu-site-verification" content="FYMCShbUK8" />
    <meta name="baidu-site-verification" content="ZYRF7OxQRW" />
    <meta name="baidu-site-verification" content="cHSqtjI0PN" />
    <meta name="baidu-site-verification" content="cHSqtjI0PN" />
    <meta name="baidu-site-verification" content="cHSqtjI0PN" />
    
    
    <link rel="canonical" href="https://hhardyy.com/2018/07/08/面向对象的艺术/">
    
    
    <title>面向对象的艺术 | 小方块 - hhardyy.com | 复杂的坑+归其原理+了解实现规则===解决？解决成功：加油解决成功;</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#958e93">
    
    
    <meta name="keywords" content="面向对象,原型,js,hasOwnProperty,constructor,instanceof,toString,原型继承,类式继承,stringify,浅拷贝与深拷贝">
    <meta name="description" content="面向对象的艺术，都是艺术，全是艺术，全是爆炸~">
<meta name="keywords" content="面向对象,原型,js,hasOwnProperty,constructor,instanceof,toString,原型继承,类式继承,stringify,浅拷贝与深拷贝">
<meta property="og:type" content="article">
<meta property="og:title" content="面向对象的艺术">
<meta property="og:url" content="http://yoursite.com/2018/07/08/面向对象的艺术/index.html">
<meta property="og:site_name" content="小方块 - hhardyy.com">
<meta property="og:description" content="面向对象的艺术，都是艺术，全是艺术，全是爆炸~">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://yoursite.com/images/faceobject/1.png">
<meta property="og:image" content="http://yoursite.com/images/faceobject/2.png">
<meta property="og:image" content="http://yoursite.com/images/faceobject/3.png">
<meta property="og:image" content="http://yoursite.com/images/faceobject/4.png">
<meta property="og:updated_time" content="2020-01-13T15:34:30.474Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="面向对象的艺术">
<meta name="twitter:description" content="面向对象的艺术，都是艺术，全是艺术，全是爆炸~">
<meta name="twitter:image" content="http://yoursite.com/images/faceobject/1.png">
    
        <link rel="alternate" type="application/atom+xml" title="小方块 - hhardyy.com" href="/atom.xml">
    
    <link rel="shortcut icon" href="/hardyfavicon.ico">
    <link rel="stylesheet" href="//unpkg.com/hexo-theme-material-indigo@latest/css/style.css">
    <script>window.lazyScripts=[]</script>

    <!-- custom head -->
    

</head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu" class="hide" >
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap" style="background-image:url(/img/paulGraham.jpg)">
      <div class="brand" style="background-color:#4154b2">
        <a href="/" class="avatar waves-effect waves-circle waves-light">
          <img src="/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">BingZhenhuang</h5>
          <a href="mailto:huangbingzhen@hhardyy.com" title="huangbingzhen@hhardyy.com" class="mail">huangbingzhen@hhardyy.com</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/"  >
                <i class="icon icon-lg icon-home"></i>
                主页
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/archives"  >
                <i class="icon icon-lg icon-archives"></i>
                所有文章
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                标签
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://github.com/HHardyy" target="_blank" >
                <i class="icon icon-lg icon-github"></i>
                Github
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://gitee.com/hhardyy" target="_blank" >
                <i class="icon icon-lg icon-cloud"></i>
                Gitee
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://juejin.im/user/59a26f926fb9a02487553b04"  >
                <i class="icon icon-lg icon-pencil"></i>
                掘金-圳
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://segmentfault.com/u/hhardyy"  >
                <i class="icon icon-lg icon-comments"></i>
                Segmentfault
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://codepen.io/HHardyy/" target="_blank" >
                <i class="icon icon-lg icon-codepen"></i>
                Codepen
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://www.freecodecamp.cn/hhardyy" target="_blank" >
                <i class="icon icon-lg icon-leaf"></i>
                Freecodecamp
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/友情链接"  >
                <i class="icon icon-lg icon-link"></i>
                友链
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">面向对象的艺术</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="输入感兴趣的关键字">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">

    <div class="container fade-scale">
        <h1 class="title">面向对象的艺术</h1>
        <h5 class="subtitle">
            
                <time datetime="2018-07-08T04:58:07.000Z" itemprop="datePublished" class="page-time">
  2018-07-08
</time>


            
        </h5>
    </div>

    


</header>


<div class="container body-wrap">
    
    <aside class="post-widget">
        <nav class="post-toc-wrap" id="post-toc">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#面向对象的神器"><span class="post-toc-number">1.</span> <span class="post-toc-text">面向对象的神器</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#对象"><span class="post-toc-number">2.</span> <span class="post-toc-text">对象</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#对象的构成"><span class="post-toc-number">3.</span> <span class="post-toc-text">对象的构成</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#工厂方式"><span class="post-toc-number">4.</span> <span class="post-toc-text">工厂方式</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#原型"><span class="post-toc-number">5.</span> <span class="post-toc-text">原型</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#工厂方式之原型"><span class="post-toc-number">6.</span> <span class="post-toc-text">工厂方式之原型</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#包装对象"><span class="post-toc-number">7.</span> <span class="post-toc-text">包装对象</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#原型链"><span class="post-toc-number">8.</span> <span class="post-toc-text">原型链</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#hasOwnProperty-constructor-instanceof-toString"><span class="post-toc-number">9.</span> <span class="post-toc-text">hasOwnProperty,constructor,instanceof,toString</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#继承"><span class="post-toc-number">10.</span> <span class="post-toc-text">继承</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#原型继承"><span class="post-toc-number">10.1.</span> <span class="post-toc-text">原型继承</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#类式继承"><span class="post-toc-number">10.2.</span> <span class="post-toc-text">类式继承</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#点表示法与中括号表示法"><span class="post-toc-number">11.</span> <span class="post-toc-text">点表示法与中括号表示法</span></a></li></ol>
        </nav>
    </aside>
    
<article id="post-面向对象的艺术"
  class="post-article article-type-post fade" itemprop="blogPost">

    <div class="post-card">
        <h1 class="post-card-title">面向对象的艺术</h1>
        <div class="post-meta">
            <time class="post-time" title="2018-07-08 12:58:07" datetime="2018-07-08T04:58:07.000Z"  itemprop="datePublished">2018-07-08</time>

            


            

        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            <p>面向对象的艺术，都是艺术，全是艺术，全是爆炸~</p>
<p><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="//music.163.com/outchain/player?type=2&id=415792563&auto=0&height=66"></iframe><br><a id="more"></a></p>
<blockquote>
<p>面向对象是一种思想，是基于面向过程而言的，就是说面向对象是将功能等通过对象来实现，把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是以功能划分问题,<br>把属性和方法写在一起，作为一个相互依存的整体——对象，面向对象有三大特征：封装性、继承性、多态性。就像去一家咖啡店，你只需要和服务员说你要什么样的咖啡，然后只需要等服务员<br>把咖啡拿上来喝掉就可以了，不需要去关注咖啡怎么做，这里服务员就是对象（不是那种对象，是另一种对象），你面向她，拿到你喜欢的咖啡，她也不需要知道你是怎么把咖啡喝完的。顺带<br>提一下面向过程，面向过程就是根据需要分析出解决问题所需要的步骤，顺序执行，其程序结构是按功能划分为若干个基本模块，这些模块形成一个树状结构。各模块之间的关系尽可能简单,<br>在功能上相对独立,每一模块内部均是由顺序、选择和循环三种基本结构组成,其模块化实现的具体方法是使用子程序。程序流程在写程序时就已决定,同样还是刚才的服务员，面向过程就<br>是你和她说要喝什么咖啡，然后浪漫的一起从调料，磨咖啡豆，煮咖啡等等等，然后你张嘴，喝一口，闭嘴，咽下去。。。</p>
</blockquote>
<h3 id="面向对象的神器"><a href="#面向对象的神器" class="headerlink" title="面向对象的神器"></a>面向对象的神器</h3><p>之前和一些道友谈论面向对象的过程中得到了一张很厉害的图<br><figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="/images/faceobject/1.png" alt="img" title="">
                </div>
                <div class="image-caption">img</div>
            </figure></p>
<h3 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h3><p>系统对象，诸如Array()，Date()这类系统自带的对象<br>一般程序员在讨论说没有对象的时候，总有人说new一个就有了，这里我new一个系统自带的数组对象<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="built_in">Array</span>();</div></pre></td></tr></table></figure></p>
<p>对象new出来之后就可以使用它里头的函数<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">arr.push();  </div><div class="line">arr.sort();</div></pre></td></tr></table></figure></p>
<p>对象的组成是由肤白+貌美+大长腿。。。错了错了。是由属性和方法构成的</p>
<h3 id="对象的构成"><a href="#对象的构成" class="headerlink" title="对象的构成"></a>对象的构成</h3><p>诶。。。由于对象是undefined，所以我构造一个对象出来，并且调用<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> girlFriend=<span class="keyword">new</span> Girlfriend();    <span class="comment">//构造对象</span></div><div class="line"><span class="built_in">console</span>.log(<span class="string">"年龄"</span>+girlFriend.age);    <span class="comment">//打印对象的年龄</span></div><div class="line"><span class="built_in">console</span>.log(<span class="string">"性别"</span>+girlFriend.gender);    <span class="comment">//打印对象的性别</span></div><div class="line">girlFriend.can();     <span class="comment">//调用对象的can方法</span></div><div class="line">girlFriend.canNot();     <span class="comment">//调用对象的canNot方法</span></div></pre></td></tr></table></figure></p>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="/images/faceobject/2.png" alt="console" title="">
                </div>
                <div class="image-caption">console</div>
            </figure>
<p>构造的方法很简单，对象的方法我用vue的methods的写法，把Girlfriend.prototype当成vue的methods，因为我觉得相对于它通常的写法略酷一些。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Girlfriend</span>(<span class="params"></span>)</span>&#123;      <span class="comment">//对象的构造函数</span></div><div class="line">	<span class="keyword">this</span>.age=<span class="number">18</span>;           <span class="comment">//对象的属性</span></div><div class="line">	<span class="keyword">this</span>.gender=<span class="string">"female"</span>;       </div><div class="line">&#125;</div><div class="line">Girlfriend.prototype=&#123;      <span class="comment">//对象的方法</span></div><div class="line">	can()&#123;</div><div class="line">		    <span class="built_in">console</span>.log(<span class="string">"可以拿来面向"</span>)</div><div class="line">		&#125;,</div><div class="line">	canNot()&#123;</div><div class="line">			<span class="built_in">console</span>.log(<span class="string">"不可以打"</span>)</div><div class="line">		&#125;</div><div class="line">	&#125;</div></pre></td></tr></table></figure></p>
<h3 id="工厂方式"><a href="#工厂方式" class="headerlink" title="工厂方式"></a>工厂方式</h3><p>知道什么是当当当当吗。。。。。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">createPerson</span>(<span class="params">name</span>)</span>&#123;</div><div class="line">	<span class="comment">//1.原料</span></div><div class="line">	<span class="keyword">var</span> obj = <span class="keyword">new</span> <span class="built_in">Object</span>();</div><div class="line">	<span class="comment">//2.加工</span></div><div class="line">	obj.name = name;</div><div class="line">	obj.showName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		<span class="built_in">console</span>.log( <span class="keyword">this</span>.name );</div><div class="line">	&#125;;</div><div class="line">	<span class="comment">//3.出场</span></div><div class="line">	<span class="keyword">return</span> obj;</div><div class="line">&#125;</div><div class="line"><span class="keyword">var</span> p1 = createPerson(<span class="string">'HHardyy'</span>);</div><div class="line">p1.showName();</div><div class="line"><span class="keyword">var</span> p2 = createPerson(<span class="string">'Hardy'</span>);</div><div class="line">p2.showName();</div></pre></td></tr></table></figure></p>
<p>但是请记住这里的p1.showName()不等于p2.showName()，即使是传入同一个参数，因为p1.showName()==p2.showName()，它是拿双方的地址来对比的，就像java中一样，但是java中可以用xxx1.equals(xxx2)来对比它们的内容是否相等。</p>
<h3 id="原型"><a href="#原型" class="headerlink" title="原型"></a>原型</h3><p>去改写对象下面公用的方法或者属性,让公用的方法或者属性在内存中存在一份 ( 可以提高性能 )，原型 就相当于写html页面时，CSS中的class，普通方法相当于CSS中的style，例如我在系统的数组对象添加一个求和方法count<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>];</div><div class="line"><span class="keyword">var</span> arr2 = [<span class="number">2</span>,<span class="number">2</span>,<span class="number">2</span>,<span class="number">2</span>];</div><div class="line"><span class="built_in">Array</span>.prototype.count = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	<span class="keyword">var</span> result = <span class="number">0</span>;</div><div class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="keyword">this</span>.length;i++)&#123;</div><div class="line">		result += <span class="keyword">this</span>[i];</div><div class="line">	&#125;</div><div class="line">	<span class="keyword">return</span> result;</div><div class="line">&#125;;</div><div class="line"><span class="built_in">console</span>.log( arr1.count() );  <span class="comment">//10</span></div><div class="line"><span class="built_in">console</span>.log( arr2.count() );  <span class="comment">//8</span></div></pre></td></tr></table></figure></p>
<p>原形下面不止可以是方法，也可以添加属性<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">Array</span>.prototype.number=<span class="number">5201314</span></div></pre></td></tr></table></figure></p>
<h3 id="工厂方式之原型"><a href="#工厂方式之原型" class="headerlink" title="工厂方式之原型"></a>工厂方式之原型</h3><p>当new去调用一个函数 : 这个时候函数中的this指向创建出来的对象,而且函数的的返回值直接就是this(隐式返回)<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Object</span>(<span class="params">name</span>)</span>&#123;</div><div class="line">	<span class="keyword">this</span>.name = name;</div><div class="line">&#125;</div><div class="line"><span class="built_in">Object</span>.prototype.showName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	<span class="built_in">console</span>.log( <span class="keyword">this</span>.name );</div><div class="line">&#125;;</div><div class="line"><span class="keyword">var</span> p1 = <span class="keyword">new</span> <span class="built_in">Object</span>(<span class="string">'HHardyy'</span>);</div><div class="line"><span class="keyword">var</span> p2 = <span class="keyword">new</span> <span class="built_in">Object</span>(<span class="string">'小方块'</span>);</div><div class="line">alert( p1.showName == p2.showName );  <span class="comment">//true</span></div></pre></td></tr></table></figure></p>
<p>在JS源码中，系统对象也是基于原型的程序，所以尽量不要去修改或者添加系统对象下面的方法和属性，不然可能导致部分原本js的部分功能改变</p>
<h3 id="包装对象"><a href="#包装对象" class="headerlink" title="包装对象"></a>包装对象</h3><p>基本数据类型都有自己对应的包装对象，如String，Number，Boolean ，基本类型会找到对应的包装对象类型，然后包装对象把所有的属性和方法给了基本类型，然后包装对象消失<br>如果在String下面添加number类型的数据，会输出undefined<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> str = <span class="string">'HHardyy'</span>;</div><div class="line"><span class="built_in">String</span>.prototype.lastValue = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	<span class="keyword">return</span> <span class="keyword">this</span>.charAt(<span class="keyword">this</span>.length<span class="number">-1</span>);</div><div class="line">&#125;;</div><div class="line">alert( str.lastValue() );  <span class="comment">//y</span></div></pre></td></tr></table></figure></p>
<h3 id="原型链"><a href="#原型链" class="headerlink" title="原型链"></a>原型链</h3><p>提到面向对象就肯定会有原型链<em>proto</em>，原型链是实例对象与原型之间的连接，它的最外层是Object.prototype，比如我在最外层添加一个love属性，那么这个属性可以在任何构造出来<br>的对象中调用<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">HHardyy</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">this</span>.say=<span class="string">"666"</span>;</div><div class="line">&#125;</div><div class="line"><span class="built_in">Object</span>.prototype.love = <span class="string">"鸡翅"</span>;</div><div class="line"><span class="keyword">var</span> h = <span class="keyword">new</span> HHardyy();</div><div class="line">alert(h.love);   <span class="comment">//鸡翅</span></div></pre></td></tr></table></figure></p>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="/images/faceobject/3.png" alt="原型链手残图" title="">
                </div>
                <div class="image-caption">原型链手残图</div>
            </figure>
<p>诶，。。。应该能看懂</p>
<h3 id="hasOwnProperty-constructor-instanceof-toString"><a href="#hasOwnProperty-constructor-instanceof-toString" class="headerlink" title="hasOwnProperty,constructor,instanceof,toString"></a>hasOwnProperty,constructor,instanceof,toString</h3><p>1、hasOwnProperty:看是不是对象自身下面的属性<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">console</span>.log( h.hasOwnProperty(<span class="string">"say"</span>))</div></pre></td></tr></table></figure></p>
<p>2、in：in运算符和hasOwnProperty不同，只要存在在原型上或者对象上就返回true<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="string">'HHardyy'</span> <span class="keyword">in</span> <span class="built_in">Object</span>;</div></pre></td></tr></table></figure></p>
<p>3、constructor:查看对象的构造函数<br>4、instanceof:对象与构造函数在原型链上是否有关系<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">console</span>.log(h <span class="keyword">instanceof</span> <span class="built_in">Array</span>)</div></pre></td></tr></table></figure></p>
<p>5、toString():系统对象下面自带的 , 自己写的对象都是通过原型链找object下面的<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">console</span>.log( <span class="built_in">Object</span>.prototype.toString.call(h) == <span class="string">'[object Array]'</span> )</div></pre></td></tr></table></figure></p>
<p>6、Object.keys:ES5的Object.keys方法可以返回对象上的所有可枚举属性(只有对象上的，从原型上继承的没有)</p>
<h3 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h3><p>继承的概念：子类不影响父类，子类可以继承父类的一些功能 ( 代码复用 )，继承分成属性继承和方法继承。继承的类型分成拷贝继承，原型继承和类式继承<br>拷贝继承:  通用型的，有new或无new的时候都可以<br>类式继承:  new构造函数<br>原型继承:  无new的对象</p>
<p>属性的继承 : 调用父类的构造函数 call<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> obj1 = <span class="keyword">new</span> Object1(<span class="string">'HHardyy'</span>);</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Object1</span>(<span class="params">name</span>)</span>&#123;   <span class="comment">//父类</span></div><div class="line">	<span class="keyword">this</span>.name = name;</div><div class="line">&#125;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Object2</span>(<span class="params">name,sex</span>)</span>&#123;  <span class="comment">//子类</span></div><div class="line">	Object1.call(<span class="keyword">this</span>,name);</div><div class="line">	<span class="keyword">this</span>.sex = sex;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>方法的继承：for in也就是拷贝继承 (jquery也是采用拷贝继承extend),原理就是遍历Object1之后赋给Object2,也可以封装成一个extend方法，在需要用的时候只需要传入2个对象<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">extend</span>(<span class="params">obj1,obj2</span>)</span>&#123;</div><div class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> attr <span class="keyword">in</span> obj2)&#123;</div><div class="line">		obj1[attr] = obj2[attr];</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>写好了这个extend方法，可以用来写自定义事件，比如各种弹框、拖拽什么的，先给对象设置默认参数，然后再做个参数传递，然后如果有用户输入参数，则该参数覆盖本身设置的默认参数，达到自定义效果。<br><a href="https://codepen.io/HHardyy/pen/eKqKqV" target="_blank" rel="external">codepen上做的一个小demo</a></p>
<h4 id="原型继承"><a href="#原型继承" class="headerlink" title="原型继承"></a>原型继承</h4><p>原型继承的几种方式<br>一、原型链继承<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Object1</span>(<span class="params"></span>)</span>&#123; <span class="keyword">this</span>.name=<span class="string">"Object1"</span>; &#125;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Object2</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">this</span>.age=<span class="string">"2"</span>; <span class="comment">//Object2继承了Object1,通过原型，形成_proto_</span></div><div class="line">&#125;</div><div class="line">    Object2.prototype=<span class="keyword">new</span> Object1();</div></pre></td></tr></table></figure></p>
<p>二、构造函数继承（对象冒充继承<br>为了解决引用共享和超类型无法传参的问题，我们采用一种叫借用构造函数的技术，或者成为对象冒充(伪造对象、经典继承)的技术来解决这两种问题<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Object1</span>(<span class="params">age</span>)</span>&#123;</div><div class="line">    <span class="keyword">this</span>.name=[<span class="string">'zhangsan'</span>,<span class="string">'lisi'</span>,<span class="string">'wangwu'</span>]</div><div class="line">    <span class="keyword">this</span>.age=age;</div><div class="line">&#125;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Object2</span>(<span class="params">age</span>)</span>&#123;</div><div class="line">    Object1.call(<span class="keyword">this</span>,age); <span class="comment">//对象冒充，给超类型传参</span></div><div class="line">&#125;</div><div class="line">    <span class="keyword">var</span> o2 = <span class="keyword">new</span> Object2(<span class="number">20</span>);</div><div class="line">    <span class="built_in">console</span>.log(o2.age);<span class="comment">//20</span></div><div class="line">    <span class="built_in">console</span>.log(o2.name);<span class="comment">//['zhangsan','lisi','wangwu']</span></div><div class="line">    o2.name.push(<span class="string">'HHardyy'</span>); <span class="comment">//添加的新数据，只给 o2</span></div><div class="line">    <span class="built_in">console</span>.log(o2.name)<span class="comment">//['zhangsan','lisi','wangwu','HHardyy']</span></div></pre></td></tr></table></figure></p>
<p>三、组合继承（原型链继承+构造函数继承）<br>原型链+借用构造函数=组合继承。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Object1</span>(<span class="params">age</span>) </span>&#123;</div><div class="line">    <span class="keyword">this</span>.name = [<span class="string">'zhangsan'</span>,<span class="string">'lisi'</span>,<span class="string">'wangwu'</span>]</div><div class="line">    <span class="keyword">this</span>.age = age;</div><div class="line">&#125;</div><div class="line">Object1.prototype.run = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.name + <span class="keyword">this</span>.age;</div><div class="line">&#125;;</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Object2</span>(<span class="params">age</span>) </span>&#123;</div><div class="line">    Object1.call(<span class="keyword">this</span>, age); <span class="comment">//对象冒充</span></div><div class="line">&#125;</div><div class="line">Object2.prototype = <span class="keyword">new</span> Object1(); <span class="comment">//原型链继承</span></div><div class="line">    <span class="keyword">var</span> o2 = <span class="keyword">new</span> Object2(<span class="number">100</span>);</div><div class="line">    <span class="built_in">console</span>.log(o2.run());</div></pre></td></tr></table></figure></p>
<p>四、原型式继承<br>借助原型并基于已有的对象创建新对象，同时还不必因此创建自定义类型<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Object1</span>(<span class="params">o</span>) </span>&#123; <span class="comment">//传递一个字面量函数</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125; <span class="comment">//创建一个构造函数</span></div><div class="line">    F.prototype = o; <span class="comment">//把字面量函数赋值给构造函数的原型</span></div><div class="line">    <span class="keyword">return</span> <span class="keyword">new</span> F(); <span class="comment">//最终返回出实例化的构造函数</span></div><div class="line">&#125;</div><div class="line"><span class="keyword">var</span> box = &#123; <span class="comment">//字面量对象</span></div><div class="line">    name : <span class="string">'zhangsan'</span>,</div><div class="line">    arr : [<span class="string">'lisi'</span>,<span class="string">'wangwu'</span>,<span class="string">'zhaoliu'</span>]</div><div class="line">&#125;;</div><div class="line">    <span class="keyword">var</span> box1 = Object1(box); <span class="comment">//传递</span></div><div class="line">    <span class="built_in">console</span>.log(box1.name);</div><div class="line">    box1.name = <span class="string">'Jack'</span>;</div><div class="line">    <span class="built_in">console</span>.log(box1.name);</div><div class="line">    <span class="built_in">console</span>.log(box1.arr);</div><div class="line">    box1.arr.push(<span class="string">'parent'</span>);</div><div class="line">    <span class="built_in">console</span>.log(box1.arr);</div><div class="line">    <span class="keyword">var</span> box2 = Object1(box); <span class="comment">//传递</span></div><div class="line">    <span class="built_in">console</span>.log(box2.name);</div><div class="line">    <span class="built_in">console</span>.log(box2.arr); <span class="comment">//引用类型共享了</span></div></pre></td></tr></table></figure></p>
<p>五、寄生组合式继承<br>寄生组合式继承解决了两次调用的问题，组合式继承就会有两次调用的情况<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">object</span>(<span class="params">o</span>) </span>&#123;</div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">F</span>(<span class="params"></span>) </span>&#123;&#125;</div><div class="line">    F.prototype = o;</div><div class="line">    <span class="keyword">return</span> <span class="keyword">new</span> F();</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">inheritPrototype</span>(<span class="params">subType, superType</span>) </span>&#123;</div><div class="line">    <span class="keyword">var</span> prototype = object(superType.prototype);  <span class="comment">//创建对象</span></div><div class="line">    prototype.constructor = subType;              <span class="comment">//增强对象</span></div><div class="line">    subType.prototype = prototype;                <span class="comment">//指定对象</span></div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>原型式继承其实就是说构造函数和子构造函数，或者说类和子类之间(js中不存在类),唯一的继承传递方式是通过原型，而不是像其他语言直接通过extends(ES6的语法糖出现了extends)<br>，所以需要手写prototype。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> Object1 = &#123; <span class="attr">name</span> : <span class="string">'HHardyy'</span> &#125;;</div><div class="line"><span class="keyword">var</span> Object2 = cloneObj(Object1);</div><div class="line"><span class="built_in">console</span>.log(Object2.name);</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">cloneObj</span>(<span class="params">obj</span>)</span>&#123;</div><div class="line">	<span class="keyword">var</span> F = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;;</div><div class="line">	F.prototype = obj;</div><div class="line">	<span class="keyword">return</span> <span class="keyword">new</span> F(); </div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h4 id="类式继承"><a href="#类式继承" class="headerlink" title="类式继承"></a>类式继承</h4><p>在js中没有类的概念，所以将js中的构造函数当成类，要做属性和方法继承的时候，要分开继承<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 父类 </span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Object1</span>(<span class="params"></span>) </span>&#123;  <span class="keyword">this</span>.name = <span class="string">'HHardyy'</span>; &#125;</div><div class="line">Object1.prototype.showName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">     alert( <span class="keyword">this</span>.name ); </div><div class="line">&#125;;</div><div class="line"><span class="comment">// 子类</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">Object2</span>(<span class="params"></span>) </span>&#123;&#125;;</div><div class="line"><span class="comment">// 将父类创建出来的对象赋值给子类的原型,就是类式继承</span></div><div class="line">    Object2.prototype = <span class="keyword">new</span> Object1(); </div><div class="line">    <span class="keyword">var</span> o2 = <span class="keyword">new</span> Object2();</div><div class="line">    o2.showName()<span class="comment">//HHardyy</span></div></pre></td></tr></table></figure></p>
<p>上面这就是一句话继承，这时候把o2.constructor打印出来，发现其实是有问题的，它把Object1给打印了出来<br><figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="/images/faceobject/4.png" alt="Object1" title="">
                </div>
                <div class="image-caption">Object1</div>
            </figure><br>原因是直接把newObject1()赋值给Object2.prototype，它就会把他原先自动生产的还有我们自己添加的原型下面的属性都覆盖掉了，所以把construtor指向给修改了，因此还需要修正con<br>structor指向Object2.prototype.constructor=Object2，其实这么改了以后虽然表面正常了，但还是有问题的，假如Object1的name是个数组[1,2]的话，声明出来的对象.name也不是<br>同一个对象，这时候可以构建一个空对象H()继承Object1的prototype,然后Object2再继承H()的prototype，就可以解决问题了。</p>
<h3 id="点表示法与中括号表示法"><a href="#点表示法与中括号表示法" class="headerlink" title="点表示法与中括号表示法"></a>点表示法与中括号表示法</h3><p>一般来说，访问对象属性时使用的都是点表示法，这也是很多面向对象语言中通用的语法，不过，在javascript也可以使用方括号表示法来访问对象的属性， 在使用方括号语法时，应该将要访问的属性以字符串的形式放在括号中，就像这样<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">alert(person[<span class="string">"name"</span>]); <span class="comment">//hhardyy</span></div><div class="line">alert(person.name); <span class="comment">//hhardyy</span></div></pre></td></tr></table></figure></p>
<p>从功能上看，这两种访问对象属性的方法没有任何区别。但是方括号语法的主要优点是可以通过变量来访问属性，就像这样<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> prototypeName=<span class="string">"name"</span>;</div><div class="line">alert(person[prototypeName]);<span class="comment">//hhardyy</span></div></pre></td></tr></table></figure></p>
<p>如果属性名中包含会导致语法错误的字符，或者属性名使用的是关键字或者保留字，也可以使用方括号表示法。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">person[<span class="string">"first name"</span>]=<span class="string">"hhardyy"</span></div></pre></td></tr></table></figure></p>
<p>由于first name中包含一个空格，所以不能使用点表示法来访问它。然而属性名中是可以包含非字母非数字的，这时候就可以使用方括号表示法来访问它们。通常，除非必须使用变量来访问属性，否则建议使用点表示法</p>

        </div>

        <blockquote class="post-copyright">
    <div class="content">
        
<span class="post-time">
    最后更新时间：<time datetime="2020-01-13T15:34:30.474Z" itemprop="dateUpdated">2020-01-13 23:34:30</time>
</span><br>


        
        谢谢浏览，我会继续努力的，示例：<a href="/2018/07/08/面向对象的艺术/" target="_blank" rel="external">http://yoursite.com/2018/07/08/面向对象的艺术/</a>
        
    </div>
    <footer>
        <a href="http://yoursite.com">
            <img src="/img/avatar.jpg" alt="BingZhenhuang">
            BingZhenhuang
        </a>
    </footer>
</blockquote>

        
<div class="page-reward">
    <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
</div>



        <div class="post-footer">
            
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/constructor/">constructor</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/hasOwnProperty/">hasOwnProperty</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/instanceof/">instanceof</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/js/">js</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/stringify/">stringify</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/toString/">toString</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/原型/">原型</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/原型继承/">原型继承</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/浅拷贝与深拷贝/">浅拷贝与深拷贝</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/类式继承/">类式继承</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/面向对象/">面向对象</a></li></ul>


            
<div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://yoursite.com/2018/07/08/面向对象的艺术/&title=《面向对象的艺术》 — 小方块 - hhardyy.com&pic=http://yoursite.com/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://yoursite.com/2018/07/08/面向对象的艺术/&title=《面向对象的艺术》 — 小方块 - hhardyy.com&source=面向对象的艺术，都是艺术，全是艺术，全是爆炸~
" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com/2018/07/08/面向对象的艺术/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《面向对象的艺术》 — 小方块 - hhardyy.com&url=http://yoursite.com/2018/07/08/面向对象的艺术/&via=http://yoursite.com" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://yoursite.com/2018/07/08/面向对象的艺术/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>



        </div>
    </div>

    
<nav class="post-nav flex-row flex-justify-between">
  
    <div class="waves-block waves-effect prev">
      <a href="/2018/07/10/对象深拷贝与浅拷贝/" id="post-prev" class="post-nav-link">
        <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
        <h4 class="title">对象深拷贝与浅拷贝</h4>
      </a>
    </div>
  

  
    <div class="waves-block waves-effect next">
      <a href="/2018/07/04/js的时间与时间戳/" id="post-next" class="post-nav-link">
        <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
        <h4 class="title">js的时间与时间戳</h4>
      </a>
    </div>
  
</nav>



    














</article>

<div id="reward" class="page-modal reward-lay">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <h3 class="reward-title">
        <i class="icon icon-quote-left"></i>
        🤠 请我喝可乐！
        <i class="icon icon-quote-right"></i>
    </h3>
    <div class="reward-content" style="width:50%">
        
        <div class="reward-code" style="text-align:center">
            <div style="width:300px;margin:0px auto;">
               <img id="rewardCode" style="width:50%;height:60%;display:block; margin:0px auto;" src="/img/alipay.jpg" alt="支付宝打赏二维码">
               <span style="display:inline-block; margin-bottom:20px;">0.88(支付宝 aliPay)</span>
               <img id="rewardCode" style="width:50%;height:60%;display:block; margin:0px auto;" src="/img/wechat.jpg" alt="微信打赏二维码">
               <span style="display:inline-block;">0.88(微信 weChat)</span>
            </div>
        </div>
    </div>
</div>



</div>

        <script>
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
</script>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script>
    function secondToDate(second) {
        if (!second) {
            return 0;
        }
        var time = new Array(0, 0, 0, 0, 0);
        if (second >= 365 * 24 * 3600) {
            time[0] = parseInt(second / (365 * 24 * 3600));
            second %= 365 * 24 * 3600;
        }
        if (second >= 24 * 3600) {
            time[1] = parseInt(second / (24 * 3600));
            second %= 24 * 3600;
        }
        if (second >= 3600) {
            time[2] = parseInt(second / 3600);
            second %= 3600;
        }
        if (second >= 60) {
            time[3] = parseInt(second / 60);
            second %= 60;
        }
        if (second > 0) {
            time[4] = second;
        }
        return time;
    }</script>
<script type="text/javascript" language="javascript">
    function setTime() {
        var create_time = Math.round(new Date(Date.UTC(2017, 08, 18, 11, 42, 23)).getTime() / 1000);
        var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
        currentTime = secondToDate((timestamp - create_time));
        currentTimeHtml = 'Running：' + currentTime[0] + '年 ' + currentTime[1] + '天 '
                + currentTime[2] + '时 ' + currentTime[3] + '分 ' + currentTime[4]
                + '秒';
        document.getElementById("htmer_time").innerHTML = currentTimeHtml;
    }    setInterval(setTime, 1000);
</script>
<footer class="footer">
    <div class="top">
        

        <p>
          <span id="busuanzi_container_page_pv">
             [&nbsp;浏览量：&nbsp;<span id="busuanzi_value_page_pv"></span>&nbsp;]
          </span>
        </p>
    </div>
    <div class="bottom">
        <p>
        <span>BingZhenhuang &copy; 2017 - 2020</span>
            <span>
                
                Power by <a href="https://hhardyy.github.io/" target="_blank">zhen On August 8</a> 
            </span>
            <span id="htmer_time" "></span>
        </p>
    </div>
</footer>

    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://yoursite.com/2018/07/08/面向对象的艺术/&title=《面向对象的艺术》 — 小方块 - hhardyy.com&pic=http://yoursite.com/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://yoursite.com/2018/07/08/面向对象的艺术/&title=《面向对象的艺术》 — 小方块 - hhardyy.com&source=面向对象的艺术，都是艺术，全是艺术，全是爆炸~
" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com/2018/07/08/面向对象的艺术/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《面向对象的艺术》 — 小方块 - hhardyy.com&url=http://yoursite.com/2018/07/08/面向对象的艺术/&via=http://yoursite.com" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://yoursite.com/2018/07/08/面向对象的艺术/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/', SHARE: true, REWARD: true };


</script>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/main.min.js"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/search.min.js" async></script>








<script>
(function() {
    var OriginTitile = document.title, titleTime;
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            document.title = '(•‾̑⌣‾̑•)✧˖°回来看我';
            clearTimeout(titleTime);
        } else {
            document.title = '(゜-゜)つロ欢迎回来';
            titleTime = setTimeout(function() {
                document.title = OriginTitile;
            },2000);
        }
    });
})();
</script>



</body>
</html>
